<template>
  <div
    :class="className"
    :style="{height:height,width:width}"
  />
</template>

<script>
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/gauge");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import chartResize from "./mixins/chart-resize";

export default {
  mixins: [chartResize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    // 父组件传递过来的图表数据
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      // Echarts实例
      chart: null,
    };
  },
  watch: {
    /* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    /* 图表初始化 */
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    /* 释放图表实例 */
    this.chart.dispose();
    /* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */
    this.chart = null;
  },
  // computed() {
  //   let value = setInterval(function () {
  //     option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
  //     myChart.setOption(option, true);
  //   }, 2000);
  //   console.log("value", value);
  // },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOptions(this.chartData);

      // var gaugec = echarts.init(document.querySelector('#gaugec'))
    },

    setOptions({} = {}) {
      this.chart.setOption(
        {
          title: {
            text: "仪表盘",
            textStyle: {
              fontSize: 15,
            },
          },
          series: [
            {
              type: "gauge",
              axisLine: {
                lineStyle: {
                  width: 20,
                  color: [
                    [0.3, "#67e0e3"],
                    [0.7, "#37a2da"],
                    [1, "#fd666d"],
                  ],
                },
              },
              pointer: {
                itemStyle: {
                  color: "auto",
                },
              },
              axisTick: {
                distance: -30,
                length: 8,
                lineStyle: {
                  color: "#fff",
                  width: 2,
                },
              },
              splitLine: {
                distance: -30,
                length: 30,
                lineStyle: {
                  color: "#fff",
                  width: 4,
                },
              },
              axisLabel: {
                color: "auto",
                distance: 1,
                fontSize: 15,
              },
              detail: {
                valueAnimation: true,
                formatter: "{value}%",
                color: "auto",
              },
              data: [
                {
                  value: 90,
                },
              ],
            },
          ],
        },
        // setInterval(function () {
        //   option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        //   myChart.setOption(option, true);
        // }, 2000)

        // setInterval(function () {
        //   this.chart.setOptions({
        //     series: [
        //       {
        //         data: [
        //           {
        //             value: +(Math.random() * 100).toFixed(2),
        //           },
        //         ],
        //       },
        //     ],
        //   });
        // }, 2000)
      );

    },
  },
};
</script>